<script setup>
import { ref } from 'vue';
import { getGroupChatList } from '@/api/groupchat';
import { onMounted } from 'vue';
import { NavBar, showToast } from 'vant';
import { nextTick } from 'vue'

// 定义一个mes存放请求回来的数据,点那个就显示那个的聊天记录
const mes = ref([])
// 定义一个变量存储id
const id = window.localStorage.getItem('id')
console.log(id);
// 定义一个变量存储图片url地址
const imgUrl = ref([])

// 定义一个变量存储处理后的聊天记录
const all_messages = ref([])
// 成员1发的信息
const all_messages1 = ref([])
// 成员2发的信息
const all_messages2 = ref([])
// 我发的消息
const all_messages3 = ref([])


onMounted(async () => {
    const res = await getGroupChatList()
    const groupMes = JSON.parse(window.localStorage.getItem('data'))
    console.log('假数据', res.data)
    // console.log('还没保存时存储的', mes.value)
    mes.value = groupMes ? groupMes.filter(item => {
        return item.id == window.localStorage.getItem('id')
    }) : res.data.message.filter(item => {
        return item.id == window.localStorage.getItem('id')
    })
    imgUrl.value = mes.value[0].url.split(',')
    // console.log('图片地址',imgUrl.value);
    // console.log('保存假数据后的下标0数据', mes.value[0])

    all_messages.value = mes.value[0].all_messages.split(',') //存放所有聊天记录

    all_messages1.value = all_messages.value.filter((item, index) => index % 2 === 0) //截取奇数的数据
    console.log(mes.value);
    all_messages2.value = all_messages.value.filter((item, index) => index % 2 !== 0) //截取偶数的数据


    // console.log('聊天记录1', all_messages1.value);
    // console.log('聊天记录2', all_messages2.value);
})

const onClickLeft = () => history.back();
const onClickRight = () => showToast('还未开放，敬请期待');

// 发送按钮
let height = ref(1)



async function send() {
    let text = document.querySelector('#textarea').value;
    if (!text) {
        alert('请输入内容');
        return;
    }
    console.log(text);
    height = document.querySelector('.content').scrollHeight;

    all_messages3.value.push(text)

    console.log(all_messages3.value);
    await  nextTick()
    height = document.querySelector('.content').scrollHeight;
    console.log('加了新数据后的高度', height)
    console.log('之前的滚动距离', document.querySelector(".content").scrollTop);
    document.querySelector(".content").scrollTop = height;
    console.log('新的滚动距离', document.querySelector(".content").scrollTop);
    document.querySelector('#textarea').value = ''
}
</script>

<template>
    <!-- 顶部返回、显示区域 -->
    <van-nav-bar v-if="mes[0]" :title="mes[0].nickname" left-text="返回" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
    </van-nav-bar>
    <div class="box">
        <div class="content" v-if="mes[0]">
            <div class="item item-center"><span>昨天 12:35</span></div>
            <div class="item item-center"><span>尊贵的超级VIP,欢迎您进群</span></div>

            <div v-if="mes[0].all_messages"  v-for="(item, index) in all_messages1.length > all_messages2.length ? all_messages1 : all_messages2 ">
                <!-- 左联系人 -->
                <div class="item item-left" v-if="all_messages1[index]">
                    <div class="avatar"><img :src="imgUrl[0]" /></div>
                    <div class="bubble bubble-left">{{ all_messages1[index] }}</div>
                </div>
                <!-- 左联系人 -->
                <div class="item item-left" v-if="all_messages2[index]">
                    <div class="avatar"><img :src="imgUrl[1]" /></div>
                    <div class="bubble bubble-left" >{{ all_messages2[index] }}</div>
                </div>
            </div>
            <!-- 右联系人 -->
            <div v-if="all_messages3" v-for="(item, index) in all_messages3" class="item item-right">
                <div class="bubble bubble-right">{{ item }}</div>
                <div class="avatar"><img
                        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.O_KI-zKPPp_-Zz7Hd6J8qwAAAA?w=201&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
                </div>
            </div>
        </div>

    </div>
    <div class="input-area">
        <textarea name="text" id="textarea"></textarea>
        <div class="button-area">
            <!-- <button id="send-btn" @click="send()">发 送</button> -->
            <button id="send-btn" @click="send">发 送</button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.footer {
    clear: both;
}

* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    height: 760px;
    width: 900px;
    border-radius: 4px;
    border: 0.5px solid #e0e0e0;
    background-color: #f5f5f5;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.content {
    width: calc(100% - 40px);
    // height: 100%;
    padding: 20px;
    overflow-y: scroll;
    flex: 1;

}



.bubble {
    max-width: 400px;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    color: #000;
    word-wrap: break-word;
    word-break: normal;
}

.item-left .bubble {
    margin-left: 15px;
    background-color: #fff;
}

.item-left .bubble:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
    left: -20px;
}

.item-right .bubble {
    margin-right: 15px;
    background-color: #9eea6a;
}

.item-right .bubble:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid #9eea6a;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: -20px;
}

.item {
    margin-top: 15px;
    display: flex;
    width: 100%;
}

.item.item-right {
    justify-content: flex-end;
}

.item.item-center {
    justify-content: center;
}

.item.item-center span {
    font-size: 12px;
    padding: 2px 4px;
    color: #fff;
    background-color: #dadada;
    border-radius: 3px;

}

.avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.input-area {
    border-top: 0.5px solid #e0e0e0;
    height: 150px;
    display: flex;
    flex-flow: column;
    background-color: #fff;
    position: relative;
}

textarea {
    flex: 1;
    padding: 5px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
    resize: none;
}

.button-area {
    display: flex;
    height: 40px;
    margin-right: 10px;
    line-height: 40px;
    padding: 5px;
    justify-content: flex-end;
    position: absolute;
    bottom: 50px;
    right: 10px;
}

.button-area button {
    width: 80px;
    border: none;
    outline: none;
    border-radius: 4px;
    float: right;
    cursor: pointer;
}
</style>